var PW = PW || {};

PW.editTeam = {

    options: function (options) {
        var _this = this;

        this.opt = options;
        this.players = options.players;
        //console.log('options:');
        //console.log(options);
    },

    players: [
    ],

    savePlayers:function () {
        var _this = this;
        _this.players = [];
        $('[data-player]').each(function () {
            var obj = {
                name: $($(this).find('input')[0]).val(),
                email: $($(this).find('input')[1]).val()
            }
            //$('input')[0].val();

            _this.players.push(obj);
        });
    },

    renderPlayers: function () {
        var _this = this;
        var tableBody = $('#playersTable tbody');
        tableBody.html('');

        for (var a in this.players) {
            var player = this.players[a];
            //console.log('player', player);

            var tr = $('<tr/>', {
                'data-player': a,
                'data-player-name': player.name,
                'data-player-email': player.email
            });
            var team = $('<td/>', {
                'html': '<img src="' + this.opt.dir + '/img/T-' + $('#team_colour').val() + '.png" style="width:40px;height:40px;"/>'
            });
            var name = $('<td/>', {
                'html': '<input value="' + player.name + '" type="text"/>'
            });
            var email = $('<td/>', {
                'html': '<input value="' + player.email + '" type="text"/>'
            });
            var remove = $('<td/>', {
                'html': '<button data-player-remove=' + a + ' class="btn btn-danger btn-small" style="font-weight: 800;margin-bottom: 0">Remove &raquo;</button>'
            });

            tr.append(team);
            tr.append(name);
            tr.append(email);
            tr.append(remove);
            tableBody.append(tr);
        }
    },

    el: { },

    events: function () {
        var _this = this;

        $(document).on('change', '#TeamForm *', function () {
            _this.savePlayers();
        });

        $(document).on('change', '#team_colour', function () {
            _this.renderPlayers();
            _this.savePlayers();
        });

        $(document).on('keyup', '#team_name', function () {
            $('#team_name_title').html($('#team_name').val() + ' Players');
            $('#team_details_title').html($('#team_name').val() + ' Details');
        });

        $(document).on('click', '.add-player', function () {
            _this.players.push({
                name:'',
                email:''
            });
            _this.renderPlayers();
            _this.savePlayers();
        });

        $(document).on('click', '[data-player-remove]', function () {
            _this.players[$(this).attr('data-player-remove')] = undefined ;
            _this.players = _.compact(_this.players);
            _this.renderPlayers();
            _this.savePlayers();
        });

        $('#TeamForm').on('submit', function () {
            var formData = $('#TeamForm').serializeObject();
            formData.team_players = JSON.stringify(_this.players);
            formData.team = _this.opt.team;
            console.log('formData', formData);

            var obj = {};
            obj.action = 'save_team';
            obj.form = formData;


            PW.ajax(obj, function (response) {
                window.location.href = _this.opt.booking;
            });

            return false;
        });

    },

    init: function (options) {
        this.options(options);
        this.events();
        this.renderPlayers();
        this.savePlayers();

    }
};

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};


